<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>统计分析</el-breadcrumb-item>
      <el-breadcrumb-item>综合评分</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>

        <el-row :gutter="30">

          <el-col :span="8">
            <el-date-picker
      v-model="timeRange"
      type="datetimerange"
      range-separator="至"
      start-placeholder="筛选开始时间"
      end-placeholder="筛选结束时间">
    </el-date-picker>
        </el-col>
    
            <el-col :span="6">
          <el-input
            placeholder="用户手机"
            v-model="phone"
            clearable
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="search()"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>

 <el-table :data="scoreList" border stripe>
     <el-table-column label="用户" prop="username"></el-table-column>
   <el-table-column label="创建时间" prop="score.createtime">

        </el-table-column>
        <el-table-column label="综合分" prop="score.score"></el-table-column>

        <el-table-column label="性别" prop="score.x1"></el-table-column>
        <el-table-column label="性别(加权)" prop="px1"></el-table-column>

        <el-table-column label="司机年龄" prop="score.x2"></el-table-column>
        <el-table-column label="司机年龄(加权)" prop="px2"></el-table-column>

        <el-table-column label="注意力" prop="score.x3"></el-table-column>
        <el-table-column label="注意力(加权)" prop="px3"></el-table-column>

        <el-table-column label="最大车速" prop="score.x4"></el-table-column>
        <el-table-column label="最大车速(加权)" prop="px4"></el-table-column>

        <el-table-column label="急转弯" prop="score.x5"></el-table-column>
        <el-table-column label="急转弯(加权)" prop="px5"></el-table-column>

        <el-table-column label="急加速" prop="score.x6"></el-table-column>
        <el-table-column label="急加速(加权)" prop="px6"></el-table-column>

        <el-table-column label="急减速" prop="score.x7"></el-table-column>
        <el-table-column label="急减速(加权)" prop="px7"></el-table-column>

        <el-table-column label="路面平整度" prop="score.x8"></el-table-column>
        <el-table-column label="路面平整度(加权)" prop="px8"></el-table-column>

        <el-table-column label="早高峰时间占比" prop="score.x9"></el-table-column>
        <el-table-column label="早高峰时间占比(加权)" prop="px9"></el-table-column>

        <el-table-column label="晚高峰时间占比" prop="score.x10"></el-table-column>
        <el-table-column label="晚高峰时间占比(加权)" prop="px10"></el-table-column>

        <el-table-column label="夜间出行时间占比" prop="score.x11"></el-table-column>
        <el-table-column label="夜间出行时间占比(加权)" prop="px11"></el-table-column>

        <el-table-column label="平均时速" prop="score.x12"></el-table-column>
        <el-table-column label="平均时速(加权)" prop="px12"></el-table-column>

        <el-table-column label="平均加速度" prop="score.x13"></el-table-column>
        <el-table-column label="平均加速度(加权)" prop="px13"></el-table-column>

        <el-table-column label="平均角加速度" prop="score.x14"></el-table-column>
        <el-table-column label="平均角加速度(加权)" prop="px14"></el-table-column>

        <el-table-column label="总里程" prop="score.x15"></el-table-column>
        <el-table-column label="总里程(加权)" prop="px15"></el-table-column>

        <el-table-column label="平顺度" prop="score.x16"></el-table-column>
        <el-table-column label="平顺度(加权)" prop="px16"></el-table-column>
        

      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.currentPage"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  
  </div>
</template>

<script>
export default {
  data () {
    let self = this;
    return {
      // 查询条件
      queryInfo: {
        id: '',
        currentPage: 1,
        title: '',
        starttime: null,
        endtime: null
      },
      // 时间起始
      timeRange:['',''],
      // 标签列表
      scoreList: [],
      paramList:[],
      total: 0,

      phone:""

    }
  },
  created () {
    // 加载页面时 加载一次数据
    this.getScoreList(1)
  //  this.getparam()
  },
  methods: {
    async getScoreList (page) {
      const { data: res } = await this.$http.get('score/all/' + page)
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.scoreList = res.data
      this.total = res.data[0].total
      this.numfix()
      //console.log(res.data)
    },
    numFilter(value) {
      const realVal = parseFloat(value).toFixed(2);
      return realVal;
    },

    numfix(){

      this.scoreList.forEach(element => {
        element.px1=this.numFilter(element.px1)
        element.px2=this.numFilter(element.px2)
        element.px3=this.numFilter(element.px3)
        element.px4=this.numFilter(element.px4)
        element.px5=this.numFilter(element.px5)
        element.px6=this.numFilter(element.px6)
        element.px7=this.numFilter(element.px7)
        element.px8=this.numFilter(element.px8)
        element.px9=this.numFilter(element.px9)
        element.px10=this.numFilter(element.px10)
        element.px11=this.numFilter(element.px11)
        element.px12=this.numFilter(element.px12)
        element.px13=this.numFilter(element.px13)
        element.px14=this.numFilter(element.px14)

      });


    },

    // 表格 分页页数切换
    handleCurrentChange (newPage) {
      this.queryInfo.currentPage = newPage
      this.getScoreList(newPage)
    },

    handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize
      this.getScoreList(1)
    },
  
    async search () {
      let startdate = this.timeRange[0]
      let enddate = this.timeRange[1]
      const { data: res } = await this.$http.post(
        'score/user',
        { 'endtime': enddate,
          'starttime': startdate,
          'phone':this.phone }, {
          headers: {
            'content-type': 'application/json',
            'X-Request-With': 'XMLHttpRequest',
            'token': window.sessionStorage.getItem('token')
          }
        }
      )
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.scoreList = []
      this.scoreList = res.data
      this.total = this.scoreList.length

    },

      numFilter(value) {
      const realVal = parseFloat(value).toFixed(2);
      return realVal;
    },


  },

  
  filters: {

  }
}
</script>

<style lang="less" scope>
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }

.el-col {
    border-radius: 4px;
  }


  
.yes{
    float:left
		width:4.2rem 
		height:2rem 
		line-height:2rem 
		text-align:center
		border-radius:1rem 
		&:nth-child(1){
			margin-right:0.8rem 
    }
    
    color:blue
    }
.no{
    float:left
		width:4.2rem 
		height:2rem 
		line-height:2rem 
		text-align:center
		border-radius:1rem 
		&:nth-child(1){
			margin-right:0.8rem 
    }
    color:black

}

</style>
